<template>
  <el-card class="strategy-card">
    <h3 class="card-title">🔥 热门攻略 TOP10</h3>
    <el-table
      :data="tableData"
      style="width: 100%"
      v-loading="loading"
      element-loading-text="正在加载热门攻略..."
      @row-click="handleRowClick"
      stripe
      border
    >
      <!-- 添加索引列 -->
      <el-table-column label="排名" width="120" align="center">
        <template #default="{ $index }">
          <el-tag :type="getRankType($index + 1)" effect="dark">No.{{ $index + 1 }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="title" label="攻略名称" width="200" header-align="center" />

      <el-table-column label="封面图" width="160" align="center">
        <template #default="{ row }">
          <el-image
            :src="row.coverImg"
            :preview-src-list="[row.coverImg]"
            fit="cover"
            class="cover-image"
          >
            <template #error>
              <div class="image-error">
                <el-icon>
                  <Picture />
                </el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>

      <el-table-column prop="content" label="攻略简介" show-overflow-tooltip min-width="240">
        <template #default="{ row }">
          <div class="content-preview" v-html="stripHtml(row.content)"></div>
        </template>
      </el-table-column>

      <el-table-column prop="likeCount" label="点赞量" width="120" align="center">
        <template #default="{ row }">
          <span class="count-box">
            <el-icon>
              <Star />
            </el-icon>
            {{ row.likeCount || 0 }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="viewCount" label="浏览量" width="120" align="center">
        <template #default="{ row }">
          <span class="count-box">
            <el-icon>
              <View />
            </el-icon>
            {{ row.viewCount || 0 }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
  
  <script setup>
import { ref, onMounted } from "vue";
import { articleListService,articleViewService } from "@/api/hostTen";
import { Picture, Star, View } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

// 处理HTML标签
const stripHtml = html => {
  const doc = new DOMParser().parseFromString(html, "text/html");
  return doc.body.textContent || "";
};

// 获取排名标签类型
const getRankType = index => {
  if (index === 1) return "danger";
  if (index === 2) return "warning";
  if (index === 3) return "success";
  return "";
};

const tableData = ref([]);
const loading = ref(true);

const list = async () => {
  try {
    const response = await articleListService();
    // 注意这里需要根据实际接口返回结构调整
    tableData.value = response.data || [];
  } catch (error) {
    console.error("获取数据失败:", error);
    tableData.value = [];
  } finally {
    loading.value = false;
  }
};

const router = useRouter();
const handleRowClick = (row) => {
  router.push(`/user/show/` + row.id);
  articleViewService(row.id);
};

onMounted(() => {
  list();
});
</script>
  
  <style scoped>
.strategy-card {
  margin: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-title {
  color: #2d4279;
  text-align: center;
  font-size: 1.8rem;
  margin: 20px 0;
  padding-bottom: 10px;
  border-bottom: 3px solid #ffd04b;
}

.cover-image {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.cover-image:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.image-error {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.count-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f5f7fa;
  border-radius: 20px;
}

.content-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  color: #606266;
}
</style>